<script setup>
import { ref } from 'vue'
import StopAppIcon from './head_icon/StopAppIcon.vue'
import AmplifyApp from './head_icon/AmplifyApp.vue'
import RetractApp from './head_icon/RetractApp.vue'

const list = ref([
  // { id: 1, title: '选择' },
  // { id: 2, title: '设置' },
  // { id: 3, title: '使用' },
])

const shoeRetractAmplifyIcon = ref(true)

// 隐藏app
const retract_app = () => {
  if (shoeRetractAmplifyIcon.value) return
  window.electron.ipcRenderer.send('retract-app');
}
// 放大app
const amplify_app = () => {
  if (shoeRetractAmplifyIcon.value) return
  window.electron.ipcRenderer.send('amplify-app');
}
// 关闭app
const stop_app = () => {
  window.electron.ipcRenderer.send('stop-app');
}
</script>

<template>
  <div class="head">
    <div class="list">
      <div v-for="itme in list" :key="itme.id" class="list-btn" @click="console.log(itme.title)">{{ itme.title }}</div>
    </div>
    <div class="stop-app">
      <RetractApp class="retract-icon" @click="retract_app" />
      <AmplifyApp class="amplify-icon" @click="amplify_app" />
      <StopAppIcon class="stop-icon" @click="stop_app" />
    </div>
  </div>
</template>

<style scoped>
.head {
  width: 100%;
  height: 35px;
  background-color: var(--head-bg);

  /* 用户不能选择 */
  user-select: none;
  /* 能拖动窗口 */
  -webkit-app-region: drag;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stop-app {
  width: 120px;
  height: 100%;
  padding-left: 7px;
  box-sizing: border-box;

  /* 用户不能选择 */
  user-select: none;
  /* 能拖动窗口 */
  -webkit-app-region: no-drag;

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.retract-icon,
.amplify-icon {
  opacity: 0;
}

.retract-icon,
.amplify-icon,
.stop-icon {
  width: 17px;
  height: 17px;
  padding: 10px;
}

.retract-icon:hover,
.amplify-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.stop-icon:hover {
  background-color: #ff1100;
}

.list {
  /* 用户不能选择 */
  user-select: none;
  /* 能拖动窗口 */
  -webkit-app-region: no-drag;

  display: flex;
  align-items: center;
}

.list-btn {
  margin: 0 5px;
  padding: 3px 6px;
  color: var(--head-text-color);
  font-size: 13px;
  border-radius: 5px;
}

.list-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
